
<script>
import { ref, onMounted, getCurrentInstance } from 'vue'

export default {
  setup() {
    const chartRef = ref(null)
    const { proxy } = getCurrentInstance()

    onMounted(() => {
      // 通过全局属性获取 echarts
      const myChart = proxy.$echarts.init(chartRef.value)
      myChart.setOption({
        title: { text: '借书年龄段' },
        xAxis: { data: ['18以下', '18~21', '21~26', '26~32', '32以上'] },
        yAxis: {},
        series: [{ type: 'bar', data: bookdata }]
      })
    })

    return { chartRef }
  }
}

// 条形图数据
const bookdata = [10,22,28,43,49]
</script>


<template>
   
    <h1>首页</h1>

    <div class="homepage">
        <span>图书馆图书数量</span>
    </div>

    <div class="homepage">
        <span>用户数量</span>
    </div>

    <div class="homepage">
        <span></span>
    </div>

    <div class="homepage">

    </div>

     <div class="date" ref="chartRef" style="width: 600px; height: 400px;"></div>



</template>

<style>
.homepage {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 40px;
    background-color: white;
    box-shadow: 5px -2px 15px rgb(231, 231, 231);
    border-radius: 5px;
}
.date{
    margin: 250px 0;
}
</style>